<template>
    <div class="content-wrapper-view">
        <div class="content-wrapper-body">
            <div class="filter-wrapper">
                <el-form ref="filterForm" :model="listQuery" :inline="true">
                    
                    <el-form-item prop="name" size="medium">
                        <el-input v-model="listQuery.name" placeholder="关键字" clearable></el-input>
                    </el-form-item>

                    <el-form-item prop="status" size="medium">
                        <el-select v-model="listQuery.status" placeholder="状态" clearable style="width: 100px">
                            <el-option
                                    v-for="item in statusOptions"
                                    :key="item.key"
                                    :label="item.label"
                                    :value="item.key">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-button type="primary" size="medium" icon="el-icon-search" @click="handleFilter">搜索</el-button>
                    <el-button type="primary" size="medium" icon="el-icon-mars-reset" @click="handleResetFilter">重置</el-button>
                </el-form>
            </div>	        
		</div>  
        
        <div class="content-wrapper-body margin-top-10">
            <el-row>
                <el-col :span="24" v-loading="loading">
                    <ve-histogram :data="chartData" :settings="chartSettings" :extend="extend"></ve-histogram>
                </el-col>
            </el-row>  	
        </div>
		<back-to-top></back-to-top>
    </div>
</template>

<script>
    import VeHistogram from "v-charts/lib/histogram.common";
    import VeLine from "v-charts/lib/line.common";
    import { selectProjectGroupByYear } from '@/api/oa/OaReport'
    import { ResultMessage } from '@/libs/response'
    import { isAuth } from "@/libs/auth";
    import BackToTop from "@/components/BackToTop/index";

    const statusOptions = [{label: '正常', key: true}, {label: '锁定', key: false}]

    export default {
        name: 'ProjectGroupByYear',
        components: {
            BackToTop,
            [VeHistogram.name]: VeHistogram,
            [VeLine.name]: VeLine
        },
        data() {
            this.chartSettings = {
            }
            this.extend = {
                series: {
                label: { show: true, position: "top" }
                }
            }
            return {
                loading: false,
                listQuery: {
                },
                statusOptions,

                chartData: {
                    columns: ['年份', '每年项目数量'],
                    //columns: ['日期', '访问用户', '下单用户', '下单率'],
                    rows: [
                        // { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
                        // { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
                        // { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
                        // { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
                        // { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
                        // { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
                    ]
                }
            }
        },
        created() {
            this.getData()
        },
        methods: {
            authorize(auth) {
				return isAuth(auth) //按钮权限验证
            },
            handleFilter() {//条件过滤
            },
            handleResetFilter() {//重置过滤条件
                this.cancel('filterForm')
            },
            getData(id) { //根据年份统计项目数量
                this.loading = true
                selectProjectGroupByYear().then(response => {
                    if(ResultMessage(response, false)) {
                        this.loading = false
                        for(let data of response.data.data) {
                            this.chartData.rows.push({'年份': data.year, '每年项目数量': data.count})
                        }
                    } else {
                        this.loading = false
                    }

                }).catch(error => {
                    this.$notify({
                        title: '提示', message: '获取数据失败',
                        type: 'error', duration: 2000
                    })
                    this.loading = false
                })
            },
            cancel(formName) {
                this.dialogFormVisible = false
                const set = this.$refs
                set[formName].resetFields()
                this.form = {
                    sex: 1,
                    status: true
                }
            }
           
        }
    }
</script>

<!-- 全局样式 -->
<style rel="stylesheet/scss" lang="scss">

</style>
<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

</style>